<template>
	<div>
		<div class="personalInfo">
			<div class="rowCenter" style="padding-top: 40px;padding-left: 5vw;">
				<div class="headPortrait">
					<image v-if="userInfo.avatar" class="headPortrait" :src="userInfo.avatar"></image>
				</div>
				<div class="white margin-left-10 " v-if="userInfo">
					<div class="text-16">{{userInfo.memberName}}</div>
					<div class="text-14 margin-top-5">电话:{{userInfo.memberPhone}}</div>
				</div>
				<div class="white margin-left-10 " v-if="!userInfo">
					<div class="text-16">请登录</div>
				</div>
			</div>
		</div>
		
		<div class="rowCenter width82 backgroundWhite radius10" style="margin-top: -40px;padding: 0 4vw !important; " @click="toCompleteOrder">
			<img style="width: 100px;height: 100px;" src="../assets/images/hand.png" />
			<div class="margin-left-15 flexWidth">
				<div class="between">
					<div class="green blod">
						<span class="text-24">{{userInfo?userInfo.orderCount:"0"}}</span>
						<span class="text-14">件</span>
					</div>
					<div class="solidBtn" >
						查看
					</div>
				</div>
				
				<div class="text-14">累计完成订单</div>
			</div>
		</div>
		
		<div class="width82 backgroundWhite radius10 margin-top-10">
			<div class="text-14 padding-bottom-10">
				配送订单
			</div>
			<div class="rowCenter wrap">
				<div v-for="(item,index) in orderTab2" :key="index" class="center" style="width: 25%;margin-bottom: 18px;position: relative;" @click="toOrder(index,item)">
					<img class="img30" :src="item.image" />
					<div class="text-12 blod">{{item.name}}</div>
					
					<div class="numBtn" v-if="item.num>0">
						<van-badge :content="item.num">
						</van-badge>
					</div>
				</div>
			</div>
		</div>
		
		<div class="signOut text-14" @click="signOut">
			退出当前账号
		</div>
		
		
		
	</div>
</template>

<script>
	import BaseView from "@/views/BaseView.vue"
	import { Dialog } from 'vant';
	export default{
		extends:BaseView,
		data(){
			return{
				title: "个人中心",
				userInfo:{},
				orderTab2:[],
				orderTab:[
					{
						image:require("@/assets/images/orderNav/orderNav1.png"),
						name:"待取货",
						state:0
					},
					{
						image:require("@/assets/images/orderNav/orderNav2.png"),
						name:"待验货",
						state:1
					},
					{
						image:require("@/assets/images/orderNav/orderNav3.png"),
						name:"已验货",
						state:4
					},
					{
						image:require("@/assets/images/orderNav/orderNav4.png"),
						name:"待退回",
						state:2
					},
					{
						image:require("@/assets/images/orderNav/orderNav5.png"),
						name:"待收货",
						state:3
					},
					{
						image:require("@/assets/images/orderNav/orderNav6.png"),
						name:"已退回",
						state:5
					},
					// {
					// 	image:require("@/assets/images/orderNav/orderNav7.png"),
					// 	name:"已取消"
					// },
				]
			}
		},
		created(){
			this.getUserInfo()
			// this.userInfo=JSON.parse(localStorage.getItem("userInfo"))
			// var token = localStorage.getItem("token")
			// if(!this.userInfo || !token){
				
			// }
			
		},
		methods:{
			toLogin(){
				Dialog.confirm({
				  title: '暂无用户信息',
				  message: '请重新登录',
				  confirmButtonColor:"#3CCC77"
				})
				  .then(() => {
				    // on confirm
					console.log("确定")
					localStorage.removeItem("token")
					this.$router.push({
						path:"/login"
					})
					// let redirect_uri = encodeURIComponent("https://erpdb.ebaoku.com/#/login")
					// let appid="wx7bd487eb9a590326"
					
					// window.location.href =
					// 	"https://open.weixin.qq.com/connect/oauth2/authorize?appid="+appid+"&redirect_uri=" + redirect_uri +
					// 	"&response_type=code&scope=snsapi_base&state=STATE#wechat_redirect"
				  })
				  .catch(() => {
				    // on cancel
					console.log("取消")
				  });
			},
			getUserInfo(){
				this.$axios.get("member/base/memberInfo").then(res=>{
					console.log("用户信息",res)
					if(!res.data){
						this.toLogin()
					}
					this.userInfo=res.data
					this.getNumber()
				})
			},
			//获取数量
			getNumber(){
				this.$axios.get("delivery/base/censusOrderNum").then(res=>{
					var orderTab=[]
					var list=res.data
					list.map(item=>{
						if(item.code=='WaitPickUp'){
							orderTab.push({
								image:require("@/assets/images/orderNav/orderNav1.png"),
								name:"待取货",
								state:0,
								num:item.num
							})
						}else if(item.code=='WaitInspection'){
							orderTab.push({
								image:require("@/assets/images/orderNav/orderNav2.png"),
								name:"待验货",
								state:1,
								num:item.num
							})
						}else if(item.code=='Settled'){
							orderTab.push({
								image:require("@/assets/images/orderNav/orderNav3.png"),
								name:"已验货",
								state:4,
								num:item.num
							})
						}else if(item.code=='WaitReturn'){
							orderTab.push({
								image:require("@/assets/images/orderNav/orderNav4.png"),
								name:"待退回",
								state:2,
								num:item.num
							})
						}else if(item.code=='WaitCollectGoods'){
							orderTab.push({
								image:require("@/assets/images/orderNav/orderNav5.png"),
								name:"待收货",
								state:3,
								num:item.num
							})
						}else if(item.code=='Returned'){
							orderTab.push({
								image:require("@/assets/images/orderNav/orderNav6.png"),
								name:"已退回",
								state:5,
								num:item.num
							})
						}
					})
					console.log(orderTab)
					this.orderTab2=orderTab
				})
			},
			toOrder(index,item){
				localStorage.setItem("active",index)
				localStorage.setItem("state",item.state)
				this.$router.push({
					path:"/orderList",
					query:{
						active:index,
						state:item.state
					}
				})
			},
			toCompleteOrder(){
				this.$router.push({
					path:"/completeOrder"
				})
			},
			signOut(){
				var that=this
				Dialog.confirm({
				  title: '退出登录',
				  message: '你确定要退出登录',
				  confirmButtonColor:"#3CCC77"
				})
				  .then(() => {
				    // on confirm
					console.log("确定")
					localStorage.removeItem("token")
					this.$router.push({
						path:"/login"
					})
					// let redirect_uri = encodeURIComponent("https://erpdb.ebaoku.com/#/login")
					// let appid="wx7bd487eb9a590326"
					
					// window.location.href =
					// 	"https://open.weixin.qq.com/connect/oauth2/authorize?appid="+appid+"&redirect_uri=" + redirect_uri +
					// 	"&response_type=code&scope=snsapi_base&state=STATE#wechat_redirect"
				  })
				  .catch(() => {
				    // on cancel
					console.log("取消")
				  });
			}
		}
	}
</script>

<style>
	.personalInfo {
		width: 100vw;
		height: 170px;
		background-image: url(../assets/images/myBg.png);
		background-size: 100% 100%;
	}
	.headPortrait {
		width: 60px;
		height: 60px;
		background: #CCCCCC;
		border-radius: 60px;
	}
	
	.headImg {
		width: 60px;
		height: 60px;
		border-radius: 60px;
	}
	.signOut{
		width: 90vw;
		padding: 12px 0;
		background: #FFFFFF;
		color: #39C572;
		text-align: center;
		margin: auto;
		border-radius: 10px;
		margin-top: 10px;
		text-align: 14px;
		
	}
	
	.numBtn{
		/* padding: 3px;
		background: red;
		color: #fff;
		font-size: 12px;
		border-radius: 20px; */
		position: absolute;
		top: -2px;
		right: 20px;
	}
</style>
